import { Component, OnInit } from '@angular/core';
import { ApplicationService } from 'src/app/core/service/application.service';
import { BulletinService } from 'src/app/core/service/bulletin.service';

// const COLORAEE = ['#3398DB','#9999ff', '#F56D71', '#A93A40', '#4ddbff', '#FFCD5C', '#258CF5'];
const ECHART_COLOE = ['#5793f3', '#d14a61', '#675bba', '#ff4683'];
// echarts 常量配置
const ECHARTS_SAFE_OPTION = {
  color: ECHART_COLOE,

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: { // 图例组件
    data: [{
      name: '漏洞数量',
      textStyle: {
        color: '#fff'
      }
    }]
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: ECHART_COLOE[0]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return params.value
              + (params.seriesData.length ? '：'
                + params.seriesData[0].data : '');
          }
        }
      },
      data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: function(value) {
          return value.max + 100;
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: ECHART_COLOE[0]
        }
      },
    }
  ],
  dataZoom: [
    {
      id: 'dataZoomX',
      type: 'slider',
      xAxisIndex: [0],
      filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
      start: 20,
      end: 100,
      textStyle: { // 滑块文字颜色
        color: ECHART_COLOE[0]
      }
    },
  ],
  series: [
    {
      name: '漏洞数量',
      type: 'line',
      itemStyle: { // 图例折现颜色
        color: '#ff4683'
      },
      smooth: true,
      data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
      areaStyle: {
        color: '#ff4683',
        opacity: .5
      }
    }
  ]
};
const ECHARTS_CVE_SCORE_OPTION = {
  color: ['#3398DB','#9999ff', '#F56D71', '#A93A40', '#4ddbff', '#FFCD5C', '#258CF5'],
  tooltip: {
    trigger: 'axis',
    formatter: '数量: {c}  <br/> {a}: {b}',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: 'shadow'          // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu'],
      axisTick: {
        alignWithLabel: true
      },
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      max: function(value) { // y轴刻度最大值;
        return value.max + 5;
    }
    }
  ],
  series: [
    {
      name: 'CVE分值',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334]
    }
  ]
};



@Component({
  selector: 'app-bulletin-dashboard',
  templateUrl: './bulletin-dashboard.component.html',
  styleUrls: ['./bulletin-dashboard.component.scss']
})
export class BulletinDashboardComponent implements OnInit {
  unauthorizedDataSet: any;

  highRiskDatas: any;

  grade = [];
  projectOverviewData = [];

  appOverviewName = [];
  appOverviewSeriousNum = [];
  appOverviewHighNum = [];
  appOverviewMediumNum = [];
  appOverviewLowNum = [];

  // cve 分值
  cveName = [];
  cveValue = [];

  // 许可使用情况
  permissionName = [];
  permissionDatas = [];

  // 安全弱点增长趋势
  safeGrowEcharts = ECHARTS_SAFE_OPTION;
  // CVE分值
  cveCount = ECHARTS_CVE_SCORE_OPTION;
  // 应用概况
  projectOverview = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      data: this.grade,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '应用概况',
        type: 'pie',
        radius: ['50%', '70%'],
        color: ['#A93A40', '#F56D71', '#FFCD5C', '#258CF5'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center',
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold',
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: this.projectOverviewData
      }
    ]
  };

  
  permission = {
    color: ['#9999ff', '#F56D71', '#A93A40', '#4ddbff', '#FFCD5C', '#258CF5'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: this.permissionName,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '许可使用情况',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: this.permissionDatas,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  constructor(
    private bulletinService: BulletinService,
    private applicationService: ApplicationService
  ) { 
    // CVE 增长趋势
      this.bulletinService.getCVEGrow().subscribe(params => {
        // console.log('getCVEGrow',params);
        this.safeGrowEcharts.xAxis[0].data = params.data.label;
        this.safeGrowEcharts.legend.data[0].name = params.data.series[0].name;
        this.safeGrowEcharts.series[0].name = params.data.series[0].name;
        this.safeGrowEcharts.series[0].data = params.data.series[0].data;
        this.safeGrowEcharts = Object.assign({}, this.safeGrowEcharts);
      });
      // CVE 分值
      this.bulletinService.getCveScore().subscribe(params => {
        console.log('getCveScore', params);
        let xData = [];
        let yData = [];
        if(params.status === 1) {
          console.log('xxx==>', params.data[0]);
          // tslint:disable-next-line: forin
          for(let i in params.data[0]){
            xData.push(i);
            yData.push(params.data[0][i]);
          }
          console.log('==>', xData+'==='+yData);
          this.cveCount.xAxis[0].data = xData;
          this.cveCount.series[0].data = yData;
          this.cveCount = Object.assign({}, this.cveCount);
        }
      });
  }

  getProjectOverview() {
    this.bulletinService.getProjectOverview()
      .subscribe((projectData) => {
        // tslint:disable-next-line: forin
        for (const key in projectData) {
          this.grade.push(projectData[key].gradeName);
          const projectOverviewDataItem = { value: 0, name: '' };

          projectOverviewDataItem.value = projectData[key].number;
          projectOverviewDataItem.name = projectData[key].gradeName;

          this.projectOverviewData.push(projectOverviewDataItem);
        }
        console.log('=== janine.getProjectOverview().projectOverviewData ===>', this.projectOverviewData);
        // this.projectOverview = JSON.parse(JSON.stringify(this.projectOverview));
        this.projectOverview = Object.assign({}, this.projectOverview);
      });
  }

  getApplicationview() {
    this.applicationService.getApplicationOverview()
      .subscribe((appData) => {
        console.log('=== janine.getApplicationview().appData ===>', appData);
        if (appData.status === 1) {
          // tslint:disable-next-line: forin
          for (const key in appData.data) {
            this.appOverviewName.push(appData.data[key].appName);

            this.appOverviewSeriousNum.push(appData.data[key].seriousNum);
            this.appOverviewHighNum.push(appData.data[key].highNum);
            this.appOverviewMediumNum.push(appData.data[key].mediumNum);
            this.appOverviewLowNum.push(appData.data[key].lowNum);
          }
          // this.appOverview = Object.assign({}, this.appOverview);
        }
      });
  }

  getPermission() {
    this.bulletinService.getPermission()
      .subscribe((permissionData) => {
        console.log('=== janine.getPermission().permissionData ===>', permissionData);
        if (permissionData.status === 1) {
          // tslint:disable-next-line: forin
          for (const key in permissionData.data) {
            this.permissionName.push(permissionData.data[key].name);
            const permissionDataItem = { value: 0, name: '' };
            permissionDataItem.value = permissionData.data[key].value;
            permissionDataItem.name = permissionData.data[key].name;
            this.permissionDatas.push(permissionDataItem);
          }
          this.permission = Object.assign({}, this.permission);
          console.log('=== Janine.getPermission().permissionDatas ===>', this.permissionDatas);
        }
      });
  }

  /**
   * 高危TOP10
   * @param reset 获取数据
   */
  getHighRisk(): void {
    this.bulletinService.getHighRisk().subscribe((highRiskData) => {
      if (highRiskData.status === 1) {
        this.highRiskDatas = highRiskData.data;
      }
    });
  }

  /**
   * 未授权软件列表
   * @param reset 获取数据
   */
  getUnauthorizedPage(): void {
    this.bulletinService.getUnauthorizedPage().subscribe((unauthorizedPage) => {
      if (unauthorizedPage.status === 1) {
        this.unauthorizedDataSet = unauthorizedPage.data;
      }
    });
  }

  ngOnInit() {
    this.getProjectOverview();
    this.getApplicationview();
    this.getPermission();
    this.getHighRisk();
    this.getUnauthorizedPage();
  }

}
